今年の桜地図のように、私的な地図を作成してブログにアップロードすることは、少し前までは Java Script のコードを使用するなどかなりの難しいことだった。
参照：隠居のパソコン備忘録：Google Maps API V3 で旅行地図を作成する

　Google MAP は、どんどん進化している。最近、桜地図を作成していて私的な地図作成が非常に簡単になってきていることが分かった。このような地図を作成する方法を備忘録として記録しておきたい。
　当サイトで、アップしている YAMAKO さんのブログに、3月下旬に山陰・山陽地方をバスツアー された記録が掲載されている。これを題材に、このようなツアーの地図を Google Map に作成し、ブログにアップする手順を記録しておきたい。

1. Google map をブラウザで開く。（大抵は、自宅近辺の地図が表示される）
2. 左上の枠のメニューボタンをクリックすると、メニューボックスが表示される。
   「マイプレイス」を選択すると出てくる画面で、右上の「マイマップ」を選択し、下の方に青い文字で表示される「地図を作成」をクリックする。



3. すると下のような画面になる。



4. 地図の名前を「山陰・山陽バスツアー」として、はじめの訪問地である「倉敷美観地区」を検索ボックスに入力すると下のような画面になる。



5. 画面中央のポップアップの下のアイコンは、それぞれ左から、マーカーを指定する「スタイル」、ポップアップに表示する情報を「編集する」、掲載する写真または動画をアップロードする「画像を追加する」、今回は使っていないが、ルートを表示する、そして掲載した写真や編集入力部分の削除する「対象物を削除」である。


6. 訪問地点を表示するマーカーは、Google map に標準で種々用意されているが、ここでは訪問順を示す番号入りのマーカーを使いたかったので、「他のアイコン」から「カスタムアイコン」を選択し、パソコン上に収納していた番号入りマーカーをアップロードした。ただし、カスタムアイコンは、一つづつしか登録できない。番号付きマーカーについては、過去のブログのGoogle Maps API で旅行地図を作る：番号付きマーカーを使う に記載している。

   

7. 情報の編集ボックスには、訪問した日付とブログ記事へのURLを入力した。URLをクリックするとブログ記事へ誘導してくれる。


8. カメラアイコンをクリックすると、パソコンからファイルを選択して画像をアップロードする画面となる。+ ボタンをクリックすると10枚まで続けてアップロードできるが、10枚以上のときは、保存後改めて、カメラアイコンをクリックして追加しなければならない。ただし、地図を公開して閲覧できる写真は10枚までである。


9. 訪問先に順次マーカーを立て、関連リンク先や写真をアップすると、下図のように表示される。ここで地図が航空写真のような表示になっているのは、左ボックスの下にある「基本地図」でスタイルを航空写真を選択したからである。



10. 作成した地図は、知人らと共有することができる。先ほどの画面にある左ボックス中断の「共有」ボタンをクリックすると、下のようなポップアップ画面がでるので、共有相手などを指定できる。メールで通知するのが一般的だろう。



11. ブログに掲載するには、左ボックスの右上メニューボタンをクリックすると表示されるボックスから「自分のサイトに埋め込む」を選ぶと下のようにブログに貼り付けるコードが表示されるので、これをコピペすればよい。

　⇛⇛　

当サイトの Studio YAMAKO では、年度別に「国内旅行地図」というページを開設している。現在、YAMAKOさんが、2017年に国内旅行した（訪問した）つど、その地点をプロットしマークを立て、そこに関連したブログ記事をリンクしている。
　ここで使用しているソフト（サービス）は、Google Maps JavaScript　API V3 である。
（参照：隠居のパソコン備忘録：Google Maps API V3 で旅行地図を作成する
　　　隠居のパソコン備忘録： Google Maps API JS V3 でXML ファイルを読み込む）
　この地図では、新しい地点を追加する毎に、XMLファイル（ここでは、V3_yamako_2017.xml）に地点情報を追加して対応している。このXMLファイルの編集には、XML notepad というXML に特化したテキスト編集ソフトを使用している。

XML notepad 編集画面

1. Windows システムツールから、コントロールパネルを開く。コントロールパネルのプログラムを開く。
   　
   コントロールパネル⇒プログラム画面
   
   　　
2. ここで既定のプログラムのあるファイルの種類を特定のプログラムでオープンを選択し、拡張子の .xml ライン（ここでは、既定のプログラムは、メモ帳となっている）を反転し、右上のプログラムの変更ボタンをクリックする。
   
   
   既定のプログラム⇒関連付けを設定する画面
   
   
   
   
3. すると、ポップアップ画面に xml ファイルを編集する機能を持ったプログラムが表示される。XML notepad がインストールされていれば、XML Notepad 2007 が表示されるので、これを選択し、OK ボタンをクリックすれば、既定のプログラムが変更される。そして画面を閉じればいい。
   
   
   プログラムを選択するポップアップ画面画面
   

先日から、独自のルート地図を作るなどで Google Map をいろいろといじっていて分かったのだが、スマホアプリの山旅ロガーなどで記録したKMLファイルがなくてもルートを表現した旅行地図を作成をできることが分かった。
　当サイトのブログ Studio YAMAKO の執筆者は旅行した記録をこまめにアップロードされている。この旅行地図を、今までは Google Maps API という Javascript を使ったユティリティで作成して、Studio YAMAKO に、収載してもらっていた。。
　今回、郡上八幡や高山をバスツアーした記録を4回に分けてブログにアップロードされている。これを参照して旅行ルート地図を作成したので、手順を記録として残して置きたいと思う。

1. Google Map を起動する。
2. 画面左上の検索窓左にあるメニューアイコンをクリックすると表示される「マイプレイス」をクリックすると表示される画面で、さらに「マイマップ」をクリックすると枠の下の方に地図を作成という青い文字が現れる。
   
3. 地図を作成をクリックすると「無題の地図」と表示されたポップアップが表示される。
   
   
   
4. ここで、ツールアイコン群から、ルート追加ボタンをクリックし、左ボックスの下に表示される交通手段が車になっていることを確認して、その下の枠に出発点から順次、マーカーを立てたい場所を入力する。すると、下のスクリーンショットのように、ルートが自動的にルートが表示される。
   


5. 地点を入力し終えると、下のようにルートが描画される。地点名は、例えば平湯温泉と入力すると何地点か候補を表示してくれるので、適切と思われる名前を選択すればよい。
   


6. この地図を左ボックスの右上にあるメニューボタンをクリックすると表示されるリストから、「KMLにエクスポート」を選択する。すると、下のようなボックスが表示されるので、セレクトボックスで＜XXX地点からXXX地点へのルート＞を選択し、＜KMLファイルにエクスポートします・・・＞にチェックを入れて、【ダウンロード】ボタンをクリックする。
   
   
   KMLファイルに任意なファイル名をつけて、任意のフォルダーに保存する。


7. 一旦、Google Map を閉じて、再度起動する。そして、上記 1. 2. まで実行する。


8. ここで、左上ボックスの無題レイヤーの下のインポートをクリックする。すると、＜インポートするファイルの選択＞という画面が出るので、「アップロード」タグになっているのを確認して、【パソコンからファイルを選択】ボタンをクリックする。


9. すると、ファイルを選択する画面となるので、先ほど保存した KML ファイルを読み込む。すると多分下のスクリーンショットのような縮尺の大きな地図が表示される。
   


10. 地図の縮尺の大きさは、右下のボタンでも調整できるが、左ボックスの上部の「プレビュー」をクリックすると下のように適切な大きさで表示してくれる。
    


11. ここで、ボックス上部の「編集します」をクリックすると各マーカーを編集できるようになる。マーカーにカーソルを合わせクリックすると、下のスクリーンショットのように、マーカーの色やスタイル、リンク先のURL 表示、関連写真や動画の挿入などができるツールアイコンが表示される。
    


12. 用意されているマーカのスタイルは、例えば下の例のように、場所のジャンルだけでも数多くのスタイルの中からチョイスできる。
    


13. そのようにして、Google Map として機能する旅行地図を作成したものが以下の地図である。

前回のYahoo!地図印刷のエントリーを書くために、いろいろとウェブサーチをしているときに、Yahoo! が地図上にルートを描くことのできる「ルートラボ」というユティリティを提供していることが分かった。
　この「ルートラボ」を使って、ご近所散策ルートを作成したのが、下の地図である。作成方法などについては、ルートラボの使い方に詳しく載っている。
　旅行後の記録として、地図に記載しておくのは便利かもしれないが、まだ使い方をよく理解していないので記録ができない。

Yahoo！ ルートラボによる地図作成

Google Map での地図作成

1. Google Map を起動する。Google のアカウントを持っていない場合には、新たに登録する。アカウントをひとつ持っておけば、Gmail（Web mail)、Google chrome（ブラウザ）、You Tube 、Google Map（地図検索）、Google ドライブ（クラウド型データ保存）などを利用できる。特に、Google ドライブは、スマホからデータを転送するときに便利なので、インストールしておきたい。
   起動すると登録したアカウントの場所を中心とする地図が表示されるはずである。
   
   
   Google 地図検索画面
   
   
   
2. 画面左上の検索窓左にあるメニューアイコンをクリックすると表示される「マイプレイス」をクリックすると表示される画面で、さらに「マイマップ」をクリックすると枠の下の方に地図を作成という青い文字が現れる。
   
3. 地図を作成をクリックすると「無題の地図」と表示されたポップアップが表示される。
   
   
   
4. 上の画面で、インポートをクリックすると、下のようにKMLファイルを選択する画面となる。私はスマホで山旅ロガーに記録したKMLファイルを Google ドライブに転送しているので、＜Google ドライブ＞タグをクリックして ＜マイドライブ＞を開き収納されているKMLファイルをインポートした。
   
   
   
   
5. 最近の散策で山旅ロガーを使って記録した KMLファイルをインポートすると、下のスクリーンショットのように表示された。
   
   
   
6. このとき、＜プレビュー＞タグをクリックすると適切な縮尺で表示される。
   ここで＜編集します＞をクリックすると下のスクリーンショットのように編集のためのボタンガ表示される。
   この手順以降の地図修飾手順がが、２０１４年１１月７日のエントリーと大きく変わっている。
   
   
   
   
7. ＜マーカーを追加＞ボタンをクリックするとカーソルが十字マークになるので、目的とする位置でクリックしてマーカーを設置する。
   マーカーを設置するとその位置にポップアップ画面が表示されると同時に、左のポップアップ画面のマーカーのタイトルにカーソルすると、スタイルアイコンが出て来る。ここで<マーカーアイコンの色や形を選択できるようになっている。
   
   
8. マーカーを保存し、再度マーカーをクリックすると、編集アイコンが表示されるので、＜編集ボタン＞でリンク先を挿入したり、＜カメラボタン＞をクリックして該当マーカーに関する写真をアップロードしたりできる。
   
   



9. 上のいろいろなツールを使って、地図を編集し終わったら、左上のボックスの＜コマンドボタン＞をクリックすると表示されるボックスで「地図をコピー」を選択すると「Google マップ」⇛「マイプレイス」⇛「マイマップ」に保存できる。
   上の同じボックスで、「自分のサイトに埋め込む」を選択すると、HTMLコード( ＜iframe ・・>＜/iframe＞)が表示されるの、これをコピーしてブログに貼り付ければ、ブログ上に作成したMapが表示できる。

測定結果一覧で該当ファイルの機能ボタンをタップすると、上のような画面になる。	左の画面で「共有・出力」ボタンをタップすると右の画面になる。	上の画面で Gmail または Bluetooth を選択して、指示に従いPC に送信する。

• ①トラッキングしたルート（ライン）のみを表示する。
• ②　①に時刻をつける
• ③　測定地点にマーカーを立て、時刻と text を表示する

• 地点１を"自宅"の文字に置き換え、
• 駅への通り道にある風邪を引いた時などにお世話になる清水内科近く（15の地点）にはGoogle サーチの結果リンクを、
• 24の地点（池のそば）のマーカ（24の地点）には、その地点で撮った水鳥の写真を表示するリンクを、
• 終点の栂・美木多駅には、泉北高速鉄道のサイトで表示される栂・美木多駅ページヘのリンク

<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\" xmlns:v=\"urn:schemas-microsoft-com:vml\">
<head> 
<meta name=\"viewport\" content=\"initial-scale=1.0, user-scalable=no\" />

<!-- jQuery lightbox2.51 -->
<script type=\"text/javascript\" src=\"http://n-shuhei.net/atelier/Jquery2.51/js/jquery-1.7.2.min.js\"></script>
<script type=\"text/javascript\" src=\"http://n-shuhei.net/atelier/Jquery2.51/js/lightbox.js\"></script>
<link rel=\"stylesheet\" type=\"text/css\" href=\"http://n-shuhei.net/atelier/Jquery2.51/css/lightbox.css\" media=\"screen\" />

<script type=\"text/javascript\" src=\"http://maps.googleapis.com/maps/api/js?sensor=false&hl=ja\"></script>
<script type=\"text/javascript\">
  function initialize() {
    var initPos = new google.maps.LatLng(34.490435, 135.482852);
    var myOptions = {
      noClear : true,
      center : initPos,
      zoom : 15,
      mapTypeId : google.maps.MapTypeId.ROADMAP
    };
    var map_canvas = new google.maps.Map(document.getElementById(\"map_canvas\"), myOptions);
    
    var kmlUrl = \"http://n-shuhei.net/atelier/maps/KML-test/141025P.kml\";
    var kmlLayer = new google.maps.KmlLayer(kmlUrl);
    kmlLayer.setMap(map_canvas);
  }

</script>
  </head>

<body onload=\"initialize()\">
  <div id=\"map_canvas\" style=\"width:100%; height:500px\"></div>
</body>
</html>

<?xml version=\"1.0\" encoding=\"utf-8\"?>
<kml xmlns=\"http://www.opengis.net/kml/2.2\">
  <Document>
    <name><![CDATA[2014-10-25 09:15:02]]></name>
    <description><![CDATA[自宅ー駅：2014-10-25 09:15～2014-10-25 09:33]]></description>
    <Placemark>
      <name>自宅</name>
      <description>2014-10-25 09:15:02：</description>
      <TimeStamp>
        <when>2014-10-25T00:15:02.000Z</when>
      </TimeStamp>
      <Point>
        <coordinates>135.48277,34.490517,30</coordinates>
      </Point>
    </Placemark>
    <Placemark>
      <name>5</name>
      <description>2014-10-25 09:16:44</description>
      <TimeStamp>
        <when>2014-10-25T00:16:44.000Z</when>
      </TimeStamp>
      <Point>
        <coordinates>135.48332,34.49017,37</coordinates>
      </Point>
    </Placemark>
    <Placemark>
      <name>10</name>
      <description>2014-10-25 09:18:55</description>
      <TimeStamp>
        <when>2014-10-25T00:18:55.000Z</when>
      </TimeStamp>
      <Point>
        <coordinates>135.48485,34.489635,33</coordinates>
      </Point>
    </Placemark>
    <Placemark>
      <name>15</name>
      <description><![CDATA[<a href=\"https://plus.google.com/104149416183172006475/about?gl=jp&hl=ja\">清水内科</a>]]></description>
      <TimeStamp>
        <when>2014-10-25T00:21:05.000Z</when>
      </TimeStamp>
      <Point>
        <coordinates>135.48608,34.488583,45</coordinates>
      </Point>
    </Placemark>
    <Placemark>
      <name>20</name>
      <description>2014-10-25 09:23:15</description>
      <TimeStamp>
        <when>2014-10-25T00:23:15.000Z</when>
      </TimeStamp>
      <Point>
        <coordinates>135.48712,34.487377,48</coordinates>
      </Point>
    </Placemark>
    <Placemark>
      <name>24</name>
      <description><![CDATA[<a href=\"http://n-shuhei.net/atelier/photo_birds/DSC04864.JPG\" title=\"\" rel=\"lightbox[]\">マガモ交雑種</a>]]></description>
      <TimeStamp>
        <when>2014-10-25T00:25:00.000Z</when>
      </TimeStamp>
      <Point>
        <coordinates>135.48792,34.486824,46</coordinates>
      </Point>
    </Placemark>
    <Placemark>
      <name>29</name>
      <description>2014-10-25 09:27:12</description>
      <TimeStamp>
        <when>2014-10-25T00:27:12.000Z</when>
      </TimeStamp>
      <Point>
        <coordinates>135.48877,34.48632,54</coordinates>
      </Point>
    </Placemark>
    <Placemark>
      <name>35</name>
      <description>2014-10-25 09:30:48</description>
      <TimeStamp>
        <when>2014-10-25T00:30:48.000Z</when>
      </TimeStamp>
      <Point>
        <coordinates>135.49054,34.485283,53</coordinates>
      </Point>
    </Placemark>
    <Placemark>
      <name>38</name>
      <description><![CDATA[<a href=\"http://www.semboku.jp/station/toga_mikita/outline/\">栂・美木多駅</a>]]></description>
      <TimeStamp>
        <when>2014-10-25T00:33:30.000Z</when>
      </TimeStamp>
      <Point>
        <coordinates>135.48999,34.484875,61</coordinates>
      </Point>
    </Placemark>
  </Document>
</kml>

<div id="player"></div>
<script>

    var tag = document.createElement('script');
   tag.src = "https://www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
   firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

   var player;
   function onYouTubeIframeAPIReady() {

  player = new YT.Player('player', {
    height: '390',
    width: '640',
    videoId: 'rL--g6q7zu4',
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
  });
}

function onPlayerReady(event) {
}


function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.ENDED) {
    alert('finish');
  }
}
</script>

追記（2015/10/26)：　Youtube の　Webページヘ内で再生させるのに、上のコードでは、Internet Explorer　では表示されないことが、最近になって分かった。現在では　Yutube が　iframe を使ったコードを提供しており、更に便利にWebページ内に埋め込むことが可能になっている。方法など詳細については、別に記録したいと思う。
　現在は、新しい埋め込みコードで、表示している。